<template>
    <div id="templateList" class="pt-70">
        <header>
            <div class="P_type">
                <div class="Choice">
                    <el-form ref="form" prop="">
                        <el-form-item label="选择小程序">
                            <el-select v-model="selectedOptions" placeholder="选择小程序" @change="handleChange">
                                <el-option :label=item.appname :value=item.appid v-for="(item,index) in options" :key="index"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-button @click="search">搜索</el-button>
                    </el-form>
                </div>
            </div>
            <el-button type="primary" class="addBtn" @click="addBtn">添加</el-button>
        </header>
        <main>

            
            <el-table :data="tableData" border style="width: 100%" stripe show-overflow-tooltip>

                <el-table-column prop="spid" label="ID" align="center"></el-table-column>
                <el-table-column prop="appname" label="小程序名称" align="center"></el-table-column>
                <el-table-column prop="keyword1" label="文字1" align="center"></el-table-column>
                <el-table-column prop="keyword2" label="文字2" align="center"></el-table-column>
               
                
                <el-table-column label="操作" align="center" width="200">
                    <template slot-scope="scope">
                        <el-button @click="modifyClick(scope.row.id)" type="text" size="small">修改</el-button>
                        <el-button type="text" size="small" @click="removeClick(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="currPage">
                <el-pagination
                    layout="prev, pager, next"
                    :page-size=pageSize
                    :current-page=currentPage
                    @current-change="handleCurrentChange"
                    :total=total>
                </el-pagination>
            </div>
        </main>
    </div>
</template>

<script>

import Vue from 'vue';
import tamplateListModify  from '../modify/tamplateListModify';
import templateListAdd  from '../add/templateListAdd';
import { iframe,addList,ModifyList,RemoteList,DataList,getChannel } from '@/assets/js';
export default {
    data(){
        return {
            selectedOptions:'',//选择小程序
            selectedOptionsID:'',//小程序ID
            options:[],
            pageSize:2,
            searchData: '',//搜索内容
            total:0,//默认数据总数
            currentPage:1,//默认开始页面
            tableData: []
        }
    },
    methods:{
        handleChange:function(e){//change小程序下拉
            console.log(e)
            this.selectedOptionsID = e;
        },
        addBtn:function(e){//新增小程序
            addList(this,templateListAdd)
        },
        handleCurrentChange:function(e){//点击分页
            this.currentPage = e
            this.CurrData()
        },
        modifyClick:function(e){//修改
            let obj = {}
            this.tableData.map((item,index)=>{
                if(item.id == e){
                    // console.log(item)
                    obj.id = item.id;
                    obj.keyword1 = item.keyword1;
                    obj.keyword2 = item.keyword2;
                    return obj
                }
            })
            iframe(this,tamplateListModify,obj,[ "800px","500px" ],'修改内容');
        },
        removeClick:function(e){//删除
            let data = { id:e }
            RemoteList(this,data,e,"template/delTemplate")
        },
        search:function(){//搜索
            this.currentPage = 1
            this.CurrData()
        },
        CurrData:function(){//分页
           
            let data = {
                page:this.currentPage,
                spid:this.selectedOptionsID?this.selectedOptionsID:''
            }

            DataList(this,data,'/template/templateList')
        }
    },
    mounted:function(){
        this.CurrData();
        getChannel(this);
    }
}
</script>
<style>
    .imgurl{
        display:flex;
        justify-content: center
    }
    .el-table td div img{
        margin: 0 10px;
        
    }
</style>






